<%-- 
    Document   : customerexpand
    Created on : Aug 11, 2012, 10:19:09 AM
    Author     : ems
--%>


<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<f:subview id="conf425475">
    <html>
        <head>

            <script type="text/javascript" language="javascript" src="../scripts/jQuery/confirm.js"></script>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
            <link rel="stylesheet" type="text/css" href="../css/paging.css"/>
            <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/jq.date.js"></script>
            <link rel="stylesheet" type="text/css" href="../css/ui.datepicker.css"/>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
            <link rel="stylesheet" type="text/css" href="../scripts/tabs/slidingtabs-horizontal.css">
            <script type="text/javascript" src="../scripts/tabs/slidetab.js"></script>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.rateit.js"></script>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/kapi.js"></script>
            <script type="text/javascript" language="javascript">
                var open_cur = 0;
                $j = jQuery.noConflict();
                $j(document).ready(function(){

                    initThickBox('.thickbox');
                    //                    $j('input#leavedate1').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
                    //                    $j('input#dateStart').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
                    //                    $j('input#dateEnd').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
                   
                    $j('input#example1').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
                    $j('.keysearch').live('keyup',function(){
                        if($j('.keysearch').val() == ""){
                            $j('.rich-table-row').show();
                                   
                        }else{
                            $j('.rich-table-row').hide();
                            $j('.rich-table-row').each(function(){
                                html = $j(this).html();
                                if(   ununicode(html).indexOf(  ununicode($j('.keysearch').val()) ) > -1    )  {
                                    $j(this).show();
                                }else{
                                    $j(this).hide();
                                }
                            });
                        }

                    });
                   
                  
                    //                    Tab4Kapi();
                    // searchClient();
                    $j('.search_box').hide();       
                    $j('.sidebar_search').live('click',function(){
                        $j('.search_box').hide();
                        if($j(this).next().hasClass('active')){

                            $j('.search_box').removeClass('active');
                        }else{

                            $j('.search_box').removeClass('active');
                            $j(this).next().addClass('active');
                            $j(this).next().show();
                        }
                    });
                    $j(".content_right").live("click",function(){
                        $j('.search_box').hide();
                    });
                    //                    $j(".saveN400").live("click",function(){
                    //                        fc250 =$j(this).parent().parent().prev().find(".org_bean").children("option:selected").val();
                    //                        pn850 =$j(this).parent().parent().prev().find(".pn850").text();
                    //                        fn450 =$j(this).parents('.content_detail').find('.org_cbxAbs').children("option:selected").val();
                    //                        date = $j('.example1').val();
                    //                        pn400 =$j(this).parent().parent().prev().find(".pn400").text();
                    //                        //                        alert(fc250+"-------"+pn850+"----------"+fn450+"-------"+date+"-------"+pn400);
                    //                        $j.post("organization.jsp?action=saven400&fc250="+fc250+"&pn850="+pn850+"&fn450="+fn450+"&date="+date+"&pn400="+pn400,function(data){
                    //                            if(data !=null){
                    //                                window.location ="organization.jsp";
                    //                            }
                    //                        }); 
                    //                        
                    //                    });
                    $j(".select_hiddenOrg").css("display","none");
                    $j(".select_choiseOrg").live("click",function(){
                        $j(".select_hiddenOrg").css("display","none");
                    });
                    $j(".select_choiseOrg").live("click",function(){
                        $j(this).next(".select_hiddenOrg").css("display","block");
                    });
                    $j(".closeOrg").live("click",function(){
                        $j(this).parent(".select_hiddenOrg").css("display","none");
                       
                    });
                    $j(".caSang").live("click",function(){                 
                        date = $j('.org_cbxTime').val();
                        //                         alert("date"+date);
                        var tmp = $j(this).find("input").toArray();                        
                        pn850 = $j(tmp[0]).val();
                        pn400 = $j(tmp[1]).val();
                        fn450 = $j(tmp[2]).val();                       
                        day = $j(tmp[3]).val();
                        //                        alert("pn850="+pn850+"--pn400="+pn400+"--fn450="+fn450+"--fc250="+1+"date="+day);
                        $j.post("organization.jsp?action=saven400&fc250="+1+"&pn850="+pn850+"&fn450="+fn450+"&day="+day+"&pn400="+pn400+"&date="+date,function(data){
                            if(data !=null){
                                window.location ="organization.jsp?action=reload&fn450="+fn450+"&date="+date;
                            }
                        }); 
                       
                    });
                    $j(".caChieu").live("click",function(){                 
                        date = $j('.org_cbxTime').val();
                        var tmp = $j(this).find("input").toArray();                        
                        pn850 = $j(tmp[0]).val();
                        pn400 = $j(tmp[1]).val();
                        fn450 = $j(tmp[2]).val();                       
                        day = $j(tmp[3]).val();
                        //                        alert("pn850="+pn850+"--pn400="+pn400+"--fn450="+fn450+"--fc250="+1+"date="+day);
                        $j.post("organization.jsp?action=saven400&fc250="+2+"&pn850="+pn850+"&fn450="+fn450+"&day="+day+"&pn400="+pn400+"&date="+date,function(data){
                            if(data !=null){
                                window.location ="organization.jsp?action=reload&fn450="+fn450+"&date="+date;
                            }
                        }); 
                       
                    });
                    $j(".caDem").live("click",function(){                 
                        date = $j('.org_cbxTime').val();
                        var tmp = $j(this).find("input").toArray();                        
                        pn850 = $j(tmp[0]).val();
                        pn400 = $j(tmp[1]).val();
                        fn450 = $j(tmp[2]).val();                       
                        day = $j(tmp[3]).val();
                        //                        alert("pn850="+pn850+"--pn400="+pn400+"--fn450="+fn450+"--fc250="+1+"date="+day);
                        $j.post("organization.jsp?action=saven400&fc250="+3+"&pn850="+pn850+"&fn450="+fn450+"&day="+day+"&pn400="+pn400+"&date="+date,function(data){
                            if(data !=null){
                                window.location ="organization.jsp?action=reload&fn450="+fn450+"&date="+date;
                            }
                        }); 
                       
                    });
                    $j(".ngayNghi").live("click",function(){                 
                        date = $j('.org_cbxTime').val();
                        var tmp = $j(this).find("input").toArray();                        
                        pn850 = $j(tmp[0]).val();
                        pn400 = $j(tmp[1]).val();
                        fn450 = $j(tmp[2]).val();                       
                        day = $j(tmp[3]).val();
                        //                        alert("pn850="+pn850+"--pn400="+pn400+"--fn450="+fn450+"--fc250="+1+"date="+day);
                        $j.post("organization.jsp?action=saven400&fc250="+0+"&pn850="+pn850+"&fn450="+fn450+"&day="+day+"&pn400="+pn400+"&date="+date,function(data){
                            if(data !=null){
                                window.location ="organization.jsp?action=reload&fn450="+fn450+"&date="+date;
                            }
                        }); 
                       
                    });
                    $j(".submitN450_NV401").live("click",function(){                 
                        date = $j('.org_cbxTime').val();                        
                        fn450 = $j('.org_cbxAbs').val();                  
                       
                        //                        alert("pn850="+pn850+"--pn400="+pn400+"--fn450="+fn450+"--fc250="+1+"date="+day);
                        $j.post("organization.jsp?action=reload&date="+date+"&pn850="+0+"&fn450="+fn450,function(data){
                            if(data !=null){
                                window.location ="organization.jsp?action=reload&fn450="+fn450+"&date="+date;
                            }
                        }); 
                       
                    });
                    
                    
                 
                });
            </script>
            <style type="text/css">
                .org_time{
                    float: left;
                    width: 150px;
                }
                .org_bean{
                    width: 115px;
                    margin-left: 3px;
                }
                .saveN400{
                    margin-left: 2px;
                }
                .org_asembly{
                    float: left;
                    width: 230px;
                }
                .org_cbxAbs{
                    width: 150px;
                    height: 25px;
                    line-height: 22px;
                    padding-top: 3px;

                }
                .org_cbxTime{
                    width: 80px;
                    height:25px;
                    line-height: 22px;
                    padding-top: 3px;
                }
                .caLamViec {
                    float: left;
                    border: none;
                    cursor: pointer;
                    text-align: center; 
                    height: 20px;
                    padding-top: 5px;
                    width: 25px;
                }
                .Sang{
                    background-color: #CFCFCF;
                }
                .Chieu{
                    background-color: #CFCFCF;
                }
                .Dem{
                    background-color: #CFCFCF;
                }
                .homnay{
                    /*                    background-color: #ffc349;*/
                    background-color: #62A3FC;
                }
                .rich-table-subheadercell {
                    border-right: 1px solid #C4C0C9;
                    color: #000000;
                    font-family: Arial,Verdana,sans-serif;
                    font-size: 11px;
                    padding: 4px;
                    text-align: center;
                    white-space: nowrap;
                }
                .rich-table-cell {
                    border-bottom: 1px solid #C4C0C9;
                    border-right: 1px solid #C4C0C9;
                    color: #000000;
                    font-family: Arial,Verdana,sans-serif;
                    font-size: 11px;
                    height: 25px;

                }
                .org_GroupName{
                    border-left: 1px solid #C4C0C9;
                    padding-left: 5px;
                    width: 120px;
                }
                .select_hiddenOrg{
                    display: none;
                    height: 100px;
                    margin-top: 20px;
                    position: absolute;
                    width: 70px;
                    z-index: 100;
                    border:1px solid gray;
                    background-color: #7c94aa;
                    color: white;

                }
                .select_choise{

                }

                .caSCT{
                    border-bottom: 1px solid gray;
                    height: 20px;
                    padding-left: 5px;
                    cursor: pointer;
                }
                .nvNhom{
                    float: right;
                    margin-right: 5px;
                    margin-top: -16px;
                }
                .submitOrg{
                    float: left;
                }
                .buttonsave{
                    width:24px;
                    height:24px;
                    border : none;
                    position: relative;
                    float:right;
                    margin-left: 10px;                    
                    cursor:pointer;

                    background:url('../images/excel.png');
                }
                .fillter{
                    margin-bottom: 10px!important;
                    margin-top: 0px !important;
                }
            </style>
        </head>


        <body>

            <a4j:form id="org_Form">
                <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
                <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_CUS_VIEW}'></div>" escape="false"/>
                <div id="content">
                    <div id="menu_top">
                        <div class="dropdown">
                            <div class="select_choise">
                                <a href="#"><span><h:outputText value="#{locale.area}"/></span></a>
                            </div>
                            <div class="select_hidden">
                                <ul>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="dropdown">
                            <div class="select_choise">
                                <a href="#"><span>Outlets</span></a>
                            </div>
                            <div class="select_hidden">
                                <ul>
                                    <li><a href="#"><span>Ban Điều Hành</span></a></li>
                                    <li><a href="#"><span>Nhóm IT</span></a></li>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="content_detail" class="content_detail">
                        <%--   <div class="fast_search_">
                               <h:inputText value="#{timekeeperController.keySearch}" onfocus="if(this.value=='#{timekeeperController.keySearch}')this.value='';" styleClass="keysearch"/>
                               <div  style="margin-left:5px; float:left" class="buttonsearch">
                                   <div class="group" style="width:150px;z-index: 999; height:180px; position:absolute; background: #2B3844; color:white !important; top:30px; display:none">
                                       <h:selectOneRadio layout="pageDirection" value="#{timekeeperController.typeSearch}" styleClass="feild_sex"  style="margin-left:5px; margin-top:4px; padding:15px; width:195px; height:140px;"   >
                                           <f:selectItem itemValue="0" itemLabel="Tất cả"/>
                                           <f:selectItem itemValue="1" itemLabel="Ðiện thoại"/>
                                           <f:selectItem itemValue="2" itemLabel="Họ tên"/>                                        
                                       </h:selectOneRadio>
                                       <h:commandButton action="#{timekeeperController.reload}" value="Search" style="margin-left:15px; margin-top:2px;" styleClass="buttonsearch2">
                                       </h:commandButton>
                                   </div>
                               </div>                  
                           </div> --%>
                        <!-- start sidebar sidebar_row1--->
                        <!-- end sidebar row1--->
                        <!-- start sidebar row2--->
                        <div class="sidebar_row2">
                            <%--    <div class="sidebar">
                                    <div class="sidebar_search">
                                        <span> <h:outputText value="#{locale.search}"/></span>
                                    </div>
                                    <div class="search_box" style="display:none;">

                                    <h3><h:outputText value="#{locale.search}"/></h3>
                                    <div class="fields_input">
                                        <input name="" type="text"  value="<h:outputText value="#{locale.search_key}"/>..." onblur="if(this.value=='')this.value='<h:outputText value="#{locale.search_key}"/>...';" onfocus="if(this.value=='<h:outputText value="#{locale.search_key}"/>...')this.value='';" />
                                        <input name="" type="submit" value="OK" />
                                    </div>

                                    <h4><h:outputText value="#{locale.advance_search}"/></h4>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.group}"/> / <h:outputText value="#{locale.Departments}"/></option>
                                        </select>
                                    </div>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.sex}"/>...</option>
                                        </select>
                                    </div>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.position}"/>...</option>
                                        </select>
                                    </div>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.income}"/>...</option>
                                        </select>
                                    </div>
                                    <div class="fields_submit">
                                        <input name="" type="submit" value="<h:outputText value="#{locale.search_option}"/>" />
                                    </div>
                                </div>
                            </div> --%>
                        </div>

                        <!-- end sidebar row2--->

                        <div class="fillter">
                            <div class="org_asembly"> <label><h:outputText value="Bộ phận"/>*:</label>&nbsp;
                                <h:selectOneMenu value="#{OrgBean.fn450}" styleClass="org_cbxAbs">  
                                    <f:selectItems value="#{OrgBean.listTabN450}" /> 

                                    <%--  <a4j:support event="onchange" reRender="org_Form"  actionListener="#{OrgBean.listTabN400}" onsubmit="showPleaseWait();" oncomplete="hidePleaseWait();" /> 
                                     <a4j:support event="onchange" reRender="newReload"/>--%>
                                </h:selectOneMenu> 
                            </div>
                            <div class="org_time">
                                <label><h:outputText value="Thời gian"/>:</label>&nbsp;
                                <h:selectOneMenu value="#{OrgBean.nv401}" styleClass="org_cbxTime">  
                                    <f:selectItems value="#{OrgBean.listTime}" /> 

                                    <%-- <a4j:support event="onchange" reRender="org_Form"  actionListener="#{OrgBean.listTabN400}" onsubmit="showPleaseWait();" oncomplete="hidePleaseWait();" />
                                     <a4j:support event="onchange" reRender="newReload"/>--%>
                                </h:selectOneMenu> 
                            </div>
                            <div class="submitOrg">
                                <img src="../images/btn_search.png" style="width:25px; height:25px;cursor: pointer;" class="submitN450_NV401" onclick="showPleaseWait();">
                                <%--   <h:outputLink value="organization.jsp?action=reloadPage&fn450=#{OrgBean.fn450}&date=#{OrgBean.nv401}" styleClass="newReload" id="newReload">
                                       <img src="../images/btn_search.png" style="width:30px; height:20px;">
                                   </h:outputLink> --%>


                            </div>
                            <div class="submitOrg">
                                <a4j:commandButton   actionListener="#{OrgBean.exportExcel()}"
                                                     onclick="showPleaseWait();"
                                                     oncomplete="hidePleaseWait();" 
                                                     styleClass="buttonsave" reRender="mesage,pn100,pn100lang">
                                </a4j:commandButton>

                            </div>

                        </div>
                        <div class="content_right">

                            <div class="content">


                                <table border="0" class="rich-table machinePosDataTable" id="tableOrg">
                                    <thead class="rich-table-thead">
                                        <tr class="rich-table-subheader ">
                                            <th class="rich-table-subheadercell " ><div><h:outputText value="Tên nhóm tổ" /></div></th>
                                            <a4j:repeat value="#{OrgBean.dayOfMonth}" var="item" rowKeyVar="index" rows="#{OrgBean.daysM}">
                                        <th class="rich-table-subheadercell"><div><h:outputText value="#{item.date}" ><f:convertNumber  pattern="##"></f:convertNumber></h:outputText></div></th>
                                    </a4j:repeat>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <a4j:repeat value="#{OrgBean.listTabN400}" var="org">
                                            <%--  <a4j:repeat value="#{OrgBean.dayOfMonth2}" var="org"> --%>
                                            <tr class="rich-table-row rich-table-firstrow" style="background-color: <h:outputText rendered="#{org.date%2 != 0}" value="#CFCFCF"/>">
                                                <td class="rich-table-cell org_GroupName" style="width:<h:outputText rendered="#{OrgBean.daysM == 28}" value="172px;"/>
                                                                                                        <h:outputText rendered="#{OrgBean.daysM == 29}" value="150px;"/>
                                                                                                        <h:outputText rendered="#{OrgBean.daysM == 30}" value="131px;"/>
                                                                                                        <h:outputText rendered="#{OrgBean.daysM == 31}" value="110px;"/>">
                                                    
                                                    <div>
                                                        <h:outputText value="#{org.nv852}" />
                                                    </div>
                                                    <div class="nvNhom" id="nvNhom">                                                        
                                                        <h:outputLink value="employeeInGroup.jsp?action=empGroup&pn850=#{org.pn850}&height=300px&width=500px" styleClass="fancybox" id="group">
                                                            <img src="../images/icon11.png" style="width:10px; height:10px;margin-top: 4px;">
                                                        </h:outputLink>

                                                    </div>

                                                </td>

                                                <a4j:repeat value="#{OrgBean.caLamViec}" var="item" rowKeyVar="index" rows="#{OrgBean.daysM}"> 
                                                    <%--   <a4j:repeat value="#{OrgBean.dayOfMonth}" var="item" rowKeyVar="index" rows="#{OrgBean.daysM}">--%>
                                                    <td class="rich-table-cell">  
                                                        <h:inputHidden value="#{OrgBean.pn400}"/>
                                                        <h:inputHidden value="#{OrgBean.pn850}"/>   

                                                        <input type="hidden" value="<h:outputText value="#{item.date}" />" id="dayOfS"/>
                                                        <div class="dropdownOrg">

                                                            <div class="select_choiseOrg" >                                                 
                                                                <h:outputText rendered="#{item.today == 0}" styleClass="caLamViec" value="#{item.cv252}"/>
                                                                <h:outputText rendered="#{item.today == item.date}" styleClass="caLamViec homnay" value ="#{item.cv252}" />
                                                                
                                                             <%--   <h:outputText rendered="#{item.fc250 == 0 && item.today == 0}" styleClass="caLamViec" value =""/>
                                                                <h:outputText rendered="#{item.fc250 == 1 && item.today == 0}" styleClass="caLamViec" value="A"/>
                                                                <h:outputText rendered="#{item.fc250 == 2 && item.today == 0}" styleClass="caLamViec" value="B"/>
                                                                <h:outputText rendered="#{item.fc250 == 3 && item.today == 0}" styleClass="caLamViec" value="C"/>
                                                                <h:outputText rendered="#{item.fc250 == 0 && item.today == item.date}" styleClass="caLamViec homnay" value ="" />
                                                                <h:outputText rendered="#{item.fc250 == 1 && item.today == item.date}" styleClass="caLamViec homnay" value="A"/>
                                                                <h:outputText rendered="#{item.fc250 == 2 && item.today == item.date}" styleClass="caLamViec homnay" value="B"/>
                                                                <h:outputText rendered="#{item.fc250 == 3 && item.today == item.date}" styleClass="caLamViec homnay" value="C"/>--%>
                                                            </div>

                                                            <div class="select_hiddenOrg">
                                                                <div class="caSCT caSang" onclick="showPleaseWait();">
                                                                    <h:outputText value="Ca sáng"/>

                                                                    <h:inputHidden value="#{org.pn850}" />
                                                                    <h:inputHidden value="#{item.pn400}" />
                                                                    <h:inputHidden value="#{org.fn450}" />                                                                   
                                                                    <h:inputHidden value="#{item.date}"/>    
                                                                </div>
                                                                <div class="caSCT caChieu" onclick="showPleaseWait();">
                                                                    <h:outputText  styleClass="cc" value ="Ca chiều"/> 
                                                                    <h:inputHidden value="#{org.pn850}"/>
                                                                    <h:inputHidden value="#{item.pn400}"/>
                                                                    <h:inputHidden value="#{org.fn450}" />                                                                    
                                                                    <h:inputHidden value="#{item.date}" />    
                                                                </div>
                                                                <div class="caSCT caDem" onclick="showPleaseWait();">
                                                                    <h:outputText  styleClass="ct" value ="Ca đêm"/>
                                                                    <h:inputHidden value="#{org.pn850}"/>
                                                                    <h:inputHidden value="#{item.pn400}"/>
                                                                    <h:inputHidden value="#{org.fn450}" />                                                                    
                                                                    <h:inputHidden value="#{item.date}" />    
                                                                </div>
                                                                <div class="caSCT ngayNghi" onclick="showPleaseWait();">
                                                                    <h:outputText  styleClass="ct" value ="Ngày nghĩ" />
                                                                    <h:inputHidden value="#{org.pn850}"/>
                                                                    <h:inputHidden value="#{item.pn400}"/>
                                                                    <h:inputHidden value="#{org.fn450}" />                                                                    
                                                                    <h:inputHidden value="#{item.date}" />    
                                                                </div>

                                                                <div class="closeOrg" style="margin-left: 5px;cursor: pointer;">Close</div>
                                                            </div>

                                                        </div>




                                                    </td>
                                                </a4j:repeat>
                                            </tr>
                                        </a4j:repeat>
                                    </tbody>
                                </table> 
                                <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                                 height="30" width="40" zindex="2000">
                                    <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                                </rich:modalPanel>


                            </div>

                        </div>
                    </div>
                </div>
            </a4j:form>

        </body>
    </html>
</f:subview>
